<template>
	<!-- 顶部搜索导航栏组件 -->
	<view class="header">
		<u-navbar :title="title" :bgColor="background" :autoBack="isBack" :leftIconSize="leftIconSize"
			:leftIconColor="leftIconColor" :titleStyle="titleStyle " :border="borderBottom" :leftText="leftText"
			:rightText="rightText" :fixed="isFixed" :placeholder="placeholder" :titleWidth="titleWidth" :height="height"
			:safeAreaInsetTop="safeAreaInsetTop" @leftClick="onClickLeft" @rightClick="onClickRight" ref="uNavbar">
			<view class="slot-wrap">
				<view class="flex Jstart Acenter main" :style="{width:icon=='long'?'100%':'90%',backgroundColor:inputColor}">
					<u-icon name="search" color="#999999" size="36" style="margin: 0 20upx"></u-icon>
					<input style="font-size: 30upx; color: #000" v-model="searchText" placeholder="请输入搜索内容" @input="search"
						@confirm="inputConfirm" />
				</view>
				<view class="flex Acenter" v-if="icon == 'chat'">
					<u-icon name="chat" size="44" style="margin-left: 20upx; transform: rotateY(180deg)" color="#fff"></u-icon>
				</view>
				<view class="flex Acenter cancel" v-if="icon == 'cancel'" @click="$emit('close')">
					<text>取消</text>
				</view>
				<view class="flex Acenter" v-if="icon == '...'">
					<u-icon name="" size="44" style="margin-left: 20upx; transform: rotateY(180deg)"></u-icon>
				</view>
				<view class="flex Acenter search" v-if="icon == 'search'">
					<view @click.stop="productshopListShow">
						<!-- <image @click.stop="productshopListShow" src="../../static/indexClose.png" mode=""></image> -->
						<view style="color:#ccc;font-weight:bolder;transform:translateY(-8upx)">...</view>
					</view>
					<view>
						<image @click.stop="shopListChange" src="../../static/close.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "header-search",
		props: {
			// 判断返回标准
			backType: {
				type: Boolean,
				default: false
			},
			leftText: { //左边的提示文字
				type: String,
				default: ''
			},
			rightText: { //右边的提示文字
				type: String,
				default: ''
			},
			title: { //标题内容
				type: String,
				default: '',
			},
			rightContent: {
				type: String, //右侧字体
				default: '',
			},
			rightIcon: {
				type: String, //右侧图标
				default: '',
			},
			isBack: { //点击左侧区域(返回图标)，是否自动返回上一页 uview2.0.19
				type: Boolean,
				default: true,
			},
			safeAreaInsetTop: { //是否开启顶部安全区适配
				type: Boolean,
				default: true,
			},
			placeholder: { //固定在顶部时，是否生成一个等高元素，以防止塌陷
				type: Boolean,
				default: true,
			},
			leftIconSize: { //左侧返回图标的大小
				type: Number,
				default: 23
			},
			leftIconColor: {
				type: String, //左侧返回图标的颜色
				default: '#303133',
			},
			background: { //背景设置
				type: String,
				default: "#FFF",
			},
			textColor: { //标题文字颜色
				type: String,
				default: '#323233',
			},
			borderBottom: { //导航栏底部是否显示下边框
				type: Boolean,
				default: false,
			},
			titleWidth: { //导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx
				type: Number,
			},
			height: { //导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px
				type: Number,
			},
			isFixed: { //头部是否固定
				type: Boolean,
				default: true
			},
			titleStyle: { //标题的样式，对象或字符串形式 uview2.0.23
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				searchText: ''
			};
		},
		computed: {},
		watch: {},
		created() {},
		methods: {
			// 返回点击
			onClickLeft() {
				console.log('返回点击')
				if(this.backType==true){
					this.$emit('onClickLeft')
					// uni.navigateTo({
					// 	url:'/pages/user/user'
					// })
				}else{
					uni.navigateBack({
						delta:1
					})
				}
				
			},
			onClickRight() {},
			//点击跳转到详情
			handelSearch() {
				let vm = this;
				vm.$emit("handelHeaderSearch", vm.searchText);
			},
			//获取输入框的值
			search(val) {
				this.$emit('handleSearch', val.detail.value)
			},
			// 搜索框确认事件
			inputConfirm() {
				this.$emit('handleConfirm')
			},
			productshopListShow() {
				this.$emit('productshopListShow');
			},
			shopListChange() {
				this.$emit('shopListChange');
			}
		},
	};
</script>

<style scoped lang='scss'>
	.slot-wrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 30upx;

		.main {
			height: 60upx;
			border-radius: 30upx;
		}

		.cancel {
			display: flex;
			align-items: center;

			text {
				width: 50upx;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 88upx;
				white-space: nowrap;
			}
		}

		.search {
			margin-left: 20upx;
			width: 134upx;
			height: 54upx;
			line-height: 54upx;
			background: #FFFFFF;
			border: 1upx solid #EEEEEE;
			border-radius: 27upx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			view {

				// width:50%;
				// height: 100%;
				// text-align: center;
				image {
					// vertical-align: middle;
					text-align: center;


					&:first-child {
						width: 26upx;
						height: 6upx;
					}

					&:last-child {
						width: 20upx;
						height: 20upx;
					}
				}
			}

		}
	}
</style>